<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<STYle>
    div {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: skyblue;
        text-align: center;
        line-height: 40px;
        display: inline-block;
        color: #fff;
        border: #000 2px solid;
        margin-left: 10px;
        margin-right: 10px;
    }

    #box7 {
        background: red;
    }
</STYle>

<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
    <div id="box7"></div>
    <button id="bu1">点击开始</button>
    <button id="bu2">点击停止</button>

    <script>
        function fn() {
            var qiu = []
            function fun() {
                var num = randNum(1, 33)
                if (qiu.includes(num)) {
                    fun()
                } else {
                    qiu.push(num)
                    if (qiu.length < 6) {
                        fun()
                    }
                }
            }

            fun()
            for (var i = 0; i < qiu.length; i++) {
                document.getElementsByTagName("div")[i].innerHTML = qiu[i]
            }
            box7.innerHTML = Math.floor(randNum(1, 16))
        }

        fn()
        var h1 = ""
        bu1.onclick = function () {
            clearInterval(h1)
            h1 = setInterval(fn, 100)

        }

        bu2.onclick = function () {
            clearInterval(h1)
        }
        function randNum(max, min) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
    </script>
</body>

</html>